<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="include :: header('宠物用品商城')"/>
    <!-- 引入卡片样式 -->
    <link th:href="@{/ruoyi/css/card.css}" rel="stylesheet">
</head>
<body class="hold-transition skin-blue sidebar-mini">
<div class="wrapper">
    <!-- 引入宠物用品卡片模板 -->
    <th:block th:include="include/card :: supplyCard"/>

    <div class="content-wrapper">
        <section class="content-header">
            <h1>宠物用品
                <small>为您的爱宠挑选优质商品</small>
            </h1>
        </section>

        <!-- 商品列表 -->
        <section class="content">
            <div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 row-cols-lg-4 g-4" id="supplyList">
                <!-- 动态加载的卡片将在此显示 -->
            </div>
        </section>
    </div>

    <!-- 购买确认弹窗 -->
    <div class="modal fade" id="buyModal" tabindex="-1" role="dialog">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title">确认购买</h4>
                </div>
                <div class="modal-body">
                    <form id="buyForm">
                        <div class="form-group">
                            <label>商品名称：</label>
                            <span id="confirmSupplyName" class="form-control-static"></span>
                        </div>
                        <div class="form-group">
                            <label>购买数量：</label>
                            <input type="number" name="quantity" class="form-control"
                                   min="1" value="1" required>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" onclick="confirmBuy()">立即购买</button>
                </div>
            </div>
        </div>
    </div>
</div>

<th:block th:include="include :: footer"/>
<script>
    let currentSupply = null; // 当前操作的商品信息
    var supplyUrl = ctx + "system/supply/list";
    var buyUrl = ctx + "system/supply/buy";
    $(function () {
        loadSupplies();
    });

    // 绑定事件处理器
    const eventHandlers = {
        click: {
            selector: '[data-action="buy"]',
            handler: function (data) {
                currentSupply = data;
                showBuyModal();
            }
        }
    };

    function showBuyModal() {
        $("#confirmSupplyName").text(currentSupply.name);
        $("#buyModal").modal('show');
    }

    function loadSupplies() {
        $.ajax({
            url: supplyUrl,
            type: "POST",
            success: function (res) {
                RuoYiCard.render({
                    data: res.rows,
                    template: '#supplyCardTemplate',
                    container: '#supplyList',
                    events: eventHandlers,
                    processItem: function (cardHtml, item) {
                        let html = cardHtml
                            .replace('{{name}}', item.name)
                            .replace('{{price}}', `¥${item.price.toFixed(2)}`)
                            .replace('{{stock}}', item.stockQuantity);
                        html = html.replace('{{promoTag}}', '<div class="badge-promo">限时特惠</div>');
                        return html;
                    }
                });
            }
        });
    }
    function confirmBuy() {
        const quantity = $("input[name='quantity']").val();
        if (!quantity || quantity < 1) {
            $.modal.alertWarning("请输入有效数量");
            return;
        }

        $.ajax({
            url: buyUrl,
            type: "POST",
            data: {
                supplyId: currentSupply.id,
                quantity: quantity
            },
            success: function (res) {
                if (res.code !== 0) {
                    $.modal.alertError(res.msg);
                    return;
                }
                $.modal.alertSuccess(`购买成功！三毛俩狗宠物店已经将物品准备好啦~`);
                $("#buyModal").modal('hide');
                loadSupplies(); // 刷新库存
            }
        });
    }
</script>
</body>
</html>